/*
* @Description:可视化-组织提交交易占比
* @Author: lil
* @Date: 2021/11/29
**/
<template>
  <div class="submitDealPieChart">
    <div id="submitDealPieChart" style="width:413px;height:250px"></div>
  </div>
</template>
<script>
  import {
    getOrgTransaction,
    getDWMOrgTransaction
  } from '@/api/blockchain/blockchainvisualization'
  export default {
    data() {
      return {
        myChart: '',
      };
    },
    mounted() {
      this.getDWMOrgTransactionInfo("all");
      this.drawLine();
    },
    methods: {
      getOrgTransactionInfo() {
        getOrgTransaction().then((res) => {
          var orgData = [];
          for (let i = 0; i < res.data.length; i++) {
            orgData.push({
              value: '',
              name: ''
            });
            orgData[i].value = res.data[i].value;
            orgData[i].name = res.data[i].org;
          }
          this.myChart.setOption({
            series: [{
              data: orgData,
            }]
          });
        }).catch((err) => {
          console.log(err);
        });
      },
      getDWMOrgTransactionInfo(date) {
        getDWMOrgTransaction(date).then((res) => {
          var orgData = [];
          for (let i = 0; i < res.data.length; i++) {
            orgData.push({
              value: '',
              name: ''
            });
            if (res.data[i].value != 0) {
              orgData[i].value = res.data[i].value;
              orgData[i].name = res.data[i].org;
            }
          }
          this.myChart.setOption({
            series: [{
              data: orgData
            }]
          });
        }).catch((err) => {
          console.log(err);
        });
      },


      drawLine() {
        this.myChart = this.$echarts.init(document.getElementById('submitDealPieChart'));
        this.myChart.setOption({
          color: ['#3d5bd4', '#0392f4', '#59fff5', '#00E473', '#FFC300', '#FF8700'],
          series: [{
            type: 'pie',
            radius: ['41%', '61%'],
            minAngle: 10,
            avoidLabelOverlap: true,
            labelLine: {
              normal: {
                length: 12,
                length2: 30,
                lineStyle: {
                  color: "rgba(74,88,149,.8)",
                },
              }
            },
            label: {
              normal: {
                formatter(param) {
                  let name = param.name;
                  let percent = Math.round(param.percent);
                  if (name.length <= 6) {
                    return `{a|${percent}}{c|%}\n\n{b|${name}}`;
                  } else if (name.length > 6 && name.length <= 12) {
                    return `{a|${percent}}{c|%}\n\n{b|${name.slice(0, 6)}\n${name.slice(6, 12)}}`;
                  }
                },
                borderWidth: 20,
                borderRadius: 4,
                rich: {
                  a: {
                    fontSize: 19,
                    fontWeight: 'bold',
                    // fontFamily: 'uniFont',
                    align: 'center',
                    color: 'rgba(55,255,239,.8)',
                    lineHeight: 1
                  },
                  b: {
                    fontSize: 16,
                    align: 'center',
                    color: 'rgba(194,226,228,.8)',
                    lineHeight: 10
                  },
                  c: {
                    fontSize: 15,
                    align: 'center',
                    color: 'rgba(55,255,239,.8)',
                    lineHeight: 1
                  }
                }
              }
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '40',
                fontWeight: 'bold'
              }
            }
          }]
        });
        if (window.screen.width == 1680) {
          this.myChart.resize({
            width: '315px'
          });
        } else if (window.screen.width == 1600) {
          this.myChart.resize({
            width: '333px'
          });
          this.myChart.setOption({
            series: [{
              radius: ['37%', '57%'],
            }]
          })
        } else if (window.screen.width <= 1440) {
          this.myChart.resize({
            width: '290px'
          });
          this.myChart.setOption({
            series: [{
              radius: ['30%', '50%'],
              label: {
                normal: {
                  rich: {
                    a: {
                      fontSize: 18
                    },
                    b: {
                      fontSize: 14
                    },
                    c: {
                      fontSize: 13
                    }
                  }
                }
              }
            }]
          })
        }
      }
    },
  }

</script>
<style lang="scss" scoped>
  @font-face {
    font-family: uniFont;
    src: url('~@/assets/styles/fonts/UnidreamLED.ttf');
  }

  .submitDealPieChart {
    background: url(~@/assets/image/ksh-pie1-bg.png) no-repeat;
    background-size: 68px 67px;
    background-position-x: 173px;
    background-position-y: 93px;
    margin-bottom: 10px;
    margin-top: 10px;
  }

  @media screen and (max-width:1680px) {
    .submitDealPieChart {
      background-position-x: 124px;
    }
  }

  @media screen and (max-width:1600px) {
    .submitDealPieChart {
      background-position-x: 136px;
      background-size: 62px 61px;
      background-position-y: 95px;
    }
  }

  @media screen and (max-width:1440px) {
    .submitDealPieChart {
      background-position-x: 119px;
      background-size: 52px 51px;
      background-position-y: 100px;
    }
  }

  @media screen and (max-width:1400px) {
    .submitDealPieChart {
      background-position-x: 121px;
      background-size: 48px 47px;
      background-position-y: 102px;
    }
  }

  @media screen and (max-width:1366px) {
    .submitDealPieChart {
      background-position-x: 121px;
      background-size: 48px 47px;
      background-position-y: 102px;
    }
  }

</style>
